
/* Top bar */
.topbar{ position:fixed; .position:static; width:100%; z-index:10000;}
.topbar .brand{ height:30px; background:#000; color:#FFF; font-size:13px;}

.topbar .brand .left{}
.topbar .brand .left ul{ padding-left:10px;}
.topbar .brand .left ul li{ padding:7px 10px; display:inline; float:left;}
.topbar .brand .left ul li a{ font-size:11px; color:#fff; text-transform:uppercase; font-weight:bold;}
.topbar .brand .left ul li a:hover{ color:#f0f0f0;}
.mercy_color{ color:#569607 !important;}

.topbar .brand .right{}
.topbar .brand .right ul{ padding-right:10px;}
.topbar .brand .right ul li{ padding:2px 3px; display:inline; float:left;}
.topbar .brand .right ul li a{ font-size:11px; color:#fff; text-transform:uppercase; font-weight:bold;}
.topbar .brand .right ul li a img{ padding-top:6px;}

.topbar .menu{ height:50px; background:url(images/graphics/bg_topbar.jpg) left top repeat-x #FAFAFF; color:#333; font-size:13px;}

.topbar .menu .left{ background:url(images/graphics/bg_topbar.jpg) left top repeat #FAFAFF;}
.topbar .menu .left ul.topnav{ margin-left:-1px;}
.topbar .menu .left ul.topnav li{ padding:17px 20px 17px 20px; float:left; border-left:1px solid #FFF; border-right:1px solid rgba(0, 0, 0, 0.2); position:relative;}
.topbar .menu .left ul.topnav li.logo{ padding:18px 20px 12px 20px;}
.topbar .menu .left ul.topnav li.end{ border-right:none;}
.topbar .menu .left ul.topnav li:hover{ background:url(images/graphics/bg-noise.png) left top repeat #FFF; cursor:pointer;}
.topbar .menu .left ul.topnav li a{ font-size:11px; color:#666; text-transform:uppercase; font-weight:bold;}
.topbar .menu .left ul.topnav li a:hover{ color:#569607;}

.topbar .menu .left ul.topnav li ul.subnav{ position:absolute; left:0px; top:51px; display:none; z-index:1000;}
.topbar .menu .left ul.topnav li ul.subnav li{
	margin: 0; padding:8px 10px;
	border-top: 1px solid #FFF; 
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	clear: both;
	width: 200px;
	background:url(images/graphics/bg-noise.png) left top repeat #FFF;
}
.topbar .menu .left ul.topnav li ul.subnav li a{ font-weight:normal; text-transform:capitalize;}
.topbar .menu .left ul.topnav li ul.subnav li:hover{ color:#666 !important; background:#FFF;}
.topbar .menu .left ul.topnav li ul.subnav li:hover a{ color:#569607;}
.topbar .menu .left ul.topnav li ul.subnav li.all a{ font-weight:bold; background:url(images/icons/bullet_go.png) right -1px no-repeat; padding-right:20px; color:#569607;}


.topbar .menu .right{}
.topbar .menu .right ul{ margin-left:-1px; border-left:1px solid rgba(0, 0, 0, 0.2); float:left;}
.topbar .menu .right ul li{ padding:17px 20px 17px 20px; float:left; border-left:1px solid #FFF; border-right:1px solid rgba(0, 0, 0, 0.2); position:relative;}
.topbar .menu .right ul li.end{ border-right:none;}
.topbar .menu .right ul li:hover{ background:url(images/graphics/bg-noise.png) left top repeat #FFF;}
.topbar .menu .right ul li a{ font-size:11px; color:#666; text-transform:uppercase; font-weight:bold;}
.topbar .menu .right ul li:hover a{ color:#569607;}

.topbar .menu .right ul.topnav li ul.subnav{ position:absolute; left:0px; top:52px; display:none; z-index:1000;}
.topbar .menu .right ul.topnav li ul.subnav li{
	margin: 0; padding:8px 10px;
	border-top: 1px solid #FFF; 
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	clear: both;
	width: 200px;
	background:url(images/graphics/bg-noise.png) left top repeat #FFF;
}
.topbar .menu .right ul.topnav li ul.subnav li a{ font-weight:normal; text-transform:capitalize;}
.topbar .menu .right ul.topnav li ul.subnav li:hover{ color:#666 !important; background:#FFF;}
.topbar .menu .right ul.topnav li ul.subnav li:hover a{ color:#569607;}
.topbar .menu .right ul.topnav li ul.subnav li.all a{ font-weight:bold; background:url(images/icons/bullet_go.png) right -1px no-repeat; padding-right:20px; color:#569607;}


/* Noi dung chinh */
#wrapper_container{ background:url(images/graphics/line.png) left top repeat-x; margin-top:1px; width:100%; overflow:hidden;}

#wrapper_header{ text-align:center; float:left; width:100%;}


#wrapper_header .banner_intro{ width:100%; .max-width:1417px; .overflow:hidden; float:left; margin-bottom:10px; margin-top:80px; .margin-top:0px;}



#wrapper_header .blog_hot{ margin:0 auto; width:100%; text-align:center;}
#wrapper_header .blog_hot h2.title{ font-weight:bold; text-transform:uppercase; font-size:24px; color:#333; margin-bottom:20px;}
#wrapper_header .blog_hot ul{ margin:0 auto; max-width:1240px;}
#wrapper_header .blog_hot ul li{ border-right:1px solid #EBEBEB; padding:0 4px; display:inline; float:left; width:300px; border-bottom:10px solid #EBEBEB; padding-bottom:10px;}
#wrapper_header .blog_hot ul li:hover{border-bottom:10px solid #569607;}
#wrapper_header .blog_hot ul li.end{ border-right:none; margin-right:0; padding-right:0;}

#wrapper_header .blog_hot ul li p.pics_blog{ background:url(images/graphics/shadow.png) center bottom no-repeat; padding-bottom:18px;}
#wrapper_header .blog_hot ul li h2.title_blog{ font-weight:bold; text-transform:uppercase; font-size:14px; margin:6px 0; text-overflow:ellipsis; overflow:hidden; width:300px; white-space:nowrap;}
#wrapper_header .blog_hot ul li h2.title_blog a{ color:#333;}
#wrapper_header .blog_hot ul li h2.title_blog a:hover{ color:#569607;}

#wrapper_header .blog_hot ul li p.lead_blog{ color:#666; height:30px; overflow:hidden; line-height:14px;}


/* Noi dung chinh - List san pham */

#wrapper_contain{ background:url(images/graphics/line.png) left top repeat-x; margin-top:10px; float:left; width:100%; min-height:100px;}

#wrapper_contain .prod_hot{ margin:0 auto; width:100%;}
#wrapper_contain .prod_hot h2.title{ font-weight:bold; text-transform:uppercase; font-size:24px; color:#333; margin-bottom:20px; margin-top:30px; text-align:center;}
#wrapper_contain .prod_hot ul{ margin:0 auto; max-width:1240px;}
#wrapper_contain .prod_hot ul li{ display:inline; float:left; width:240px; margin:0 10px 10px 0; height:240px; position:relative;}

#wrapper_contain .prod_hot ul li .mask_pro{ width:180px; height:180px; position:absolute; left:0; top:0; background:url(images/graphics/mask.png) left top repeat; text-align:center; padding:20px; z-index:9;}
#wrapper_contain .prod_hot ul li .mask_pro a.title{ font-size:24px; color:#FFF; text-transform:uppercase; font-weight:bold;}
#wrapper_contain .prod_hot ul li .mask_pro a.title:hover{ color:#999;}
#wrapper_contain .prod_hot ul li .mask_pro p.danhmuc{ position:absolute; z-index:10; bottom:10px; right:10px; color:#999; text-transform:uppercase; font-size:10px;}
#wrapper_contain .prod_hot ul li .mask_pro p.danhmuc a{ color:#FFF; font-weight:bold; text-transform:uppercase;}

#wrapper_contain .prod_hot ul li.end{ margin-right:0; padding-right:0;}


/* Footer */
#wrapper_category{ background:url(images/graphics/bg-footer-fade.png) left top repeat-x #DDD;  margin-top:10px; float:left; width:100%; padding-bottom:30px;}
.bg_trang_cate{ .background:url(images/graphics/bg-footer-fade.png) left -50px repeat-x #DDD !important;}
#wrapper_category .contact_form{ margin:0 auto; width:100%;}
#wrapper_category .contact_form h2.title{ font-weight:bold; text-transform:uppercase; font-size:24px; color:#333; margin-bottom:20px; margin-top:30px; text-align:center;}
#wrapper_category .contact_form #contact_me{ margin:0 auto; max-width:940px; background:#f0f0f0;}
#wrapper_category .contact_form #contact_me .info{ width:280px; height:240px; padding:10px; margin-right:20px; background:#FFF; float:left; display:inline-block; }
#wrapper_category .contact_form #contact_me .end{ margin-right:0;}

#wrapper_category .contact_form #contact_me .info ul.social{}
#wrapper_category .contact_form #contact_me .info ul.social li{ padding:9px 0; text-align:center;}

#wrapper_footer{ background:#666; height:50px; float:left; width:100%;}
#wrapper_footer .info{ text-align:center; color:#FFF; padding-top:20px;}

/* Danh sach san pham */
#wrapper_category .list_category{ padding-top:80px; .padding-top:0px;}
#wrapper_category .contact_form #ds_sanpham{ margin:0 auto; max-width:1330px;}

.danhsachanh{ margin-top:46px; float:left;}
.danhsachanh .title{ position:relative; width:100%; float:left; margin-bottom:5px;}
.danhsachanh .but_danganh{ position:absolute; right:40px; top:0;}

.danhsachanh .list_anh{float:left; width:980px; overflow:hidden;}

.danhsachanh .list_anh .ds_anh{ float:left; width:100%; margin-bottom:10px;}
.danhsachanh .list_anh .ds_anh{position:relative;}

.box_items{ width:256px; padding-bottom:6px; color:#464646; float:left;position:absolute;top:0;left:0; margin:0 10px 10px 0; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.33); border-radius:3px 3px 3px 3px; background:#FFF;}

.box_items .bg_border .pics{ width:236px; padding:0 10px; padding-top:11px;}
.box_items .bg_border .pics img{ margin-bottom:0px;}
.box_items .bg_border .pics p{ margin-bottom:6px;}
.box_items .bg_border .pics .price span{}
.box_items .bg_border .pics .price span b{ color:#e03672;}
.box_items .bg_border .pics p.danhmuc{ font-style:italic; font-size:11px; color:#999;}
.box_items .bg_border .pics p.danhmuc a{ color:#569607;}
.box_items .bg_border .pics p.thamkhaothem{ font-style:italic; font-size:11px; color:#999;}
.box_items .bg_border .pics p.thamkhaothem a{ color:#569607;}


/* Phan trang ---------------------------------------------- */
.phantrang {
    float:left;
    margin:0 auto;
    padding:30px 0 0px 0;
    text-align: center;
    width:100%;
}
.phantrang ul {
    float: left;
    text-align: center;
    width:100%;
}
.phantrang ul li {
    display: inline;
}
.phantrang ul li a{
    box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.33); 
	border-radius:3px 3px 3px 3px; 
	background:#FFF;
    color: #569607;
    display: inline-block;
    height: 20px;
    margin-right: 2px;
    padding-top: 4px;
    text-align: center;
    width: 23px;
}
.phantrang ul li a.active{ font-weight:bold;}


/* Popup thumbnail---------------------------------------------------------- */
.w540{ width:540px;}
#pics_thumb{ overflow:inherit;}
#pics_thumb .bg_border{ padding:20px 20px 10px 20px; background:#FFF;}
#pics_thumb .bg_border .pics p{ margin-bottom:6px;}

#pics_thumb .comment_anh{ width:499px;}
#pics_thumb .comment_anh ul li{ width:480px;}
#pics_thumb .comment_anh ul.list_comment li .nd_comment{ width:440px;}

#pics_thumb .bg_border .pics .price span{}
#pics_thumb .bg_border .pics .price span b{ color:#e03672;}
#pics_thumb .bg_border .pics p.danhmuc{ font-style:italic; font-size:11px; color:#999;}
#pics_thumb .bg_border .pics p.danhmuc a{ color:#569607;}
#pics_thumb .bg_border .pics p.thamkhaothem{ font-style:italic; font-size:11px; color:#999;}
#pics_thumb .bg_border .pics p.thamkhaothem a{ color:#569607;}

#pics_thumb .bg_border .pics p.thamkhaothem input.sharelink{ width:468px; border:1px solid #c7c7c6; color:#999; font-size:11px; padding:5px;}

#pics_thumb .box_comment{ width:600px; overflow:hidden; margin-top:10px; float:left;}

.w640{ width:640px;}

/* Breakcrumb ------------------------------------------------------------*/
.cate_current{
	left: 50%;
    margin-left: -95px;
	.margin-left:0;
    position:fixed;
	.position:absolute;
    top: 80px;
    z-index: 102;
	color: #444444;       
	padding: 10px;
	background-color: #EEEEEE;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33), 0 0 2px #FFFFFF inset;
	border-top:none;    
    text-align: center;
    text-shadow: 0 1px #FFFFFF;
    width: auto;
	text-align:center;
	text-transform:uppercase;
}
.cate_current a{ color: #444444; text-transform:uppercase; font-weight: bold; cursor: pointer;}
.cate_current a:hover{ color:#569607;}
.cate_current p.icon_arrow_down{ width:100%; height:11px; background:url(images/icons/icon_arrow_down.gif) center top no-repeat; margin-top:5px;}
.cate_current p.icon_arrow_down{ .display:none;}


.pad_bot_40{ padding-bottom:40px;}


/* Nhat ki chi tiet ----------------------------------------------------------*/
#wrapper_header .blog_detail{ margin:0 auto; width:100%; text-align:center; padding-bottom:20px;}
#wrapper_header .blog_detail h2.title{ font-weight:bold; text-transform:uppercase; font-size:24px; color:#333; margin-bottom:20px;}
#wrapper_header .blog_detail .content{ width:1240px; padding:20px; margin:0 auto; text-align:left; background:url(images/graphics/heading.png) center top no-repeat #f0f0f0; overflow:hidden; border-bottom:1px dotted #999;}
#wrapper_header .blog_detail .content p{ margin-bottom:10px;}
#wrapper_header .blog_detail .content p.pics{ text-align:center;}


.vitri_blogdetail{ margin-top:100px; .margin-top:40px; }


